import React, { useState, useEffect, forwardRef } from 'react'
import { Form, Select, Input } from 'antd'

const UserForm = forwardRef((props, ref) => {
	const [form] = Form.useForm()
	const [isDisabled, setIsDisabled] = useState(false)
	// const [roleUnderDepartment, setRole] = useState([])
	const { departments, roles, isUpdateDisable } = props

	useEffect(() => {
		setIsDisabled(isUpdateDisable)
	}, [isUpdateDisable])

	// const { roleId, department } = JSON.parse(localStorage.getItem('token'))
	// const roleObj = {
	// 	"1": "superAdmin",
	// 	"2": "admin",
	// 	"3": "editor"
	// }
	// const checkRegionDisable = (item) => {
	// 	if (props.isUpdate) { // 如果正在更新
	// 		if (roleObj[roleId] === "superAdmin") { // 如果操作更新的用户是超级管理员
	// 			return false // 可执行任意操作
	// 		} else {
	// 			return true // 如果操作更新的用户 不是 超级管理员，则无法更改任何用户的区域
	// 		}
	// 	} else { // 如果正在添加
	// 		if (roleObj[roleId] === "superAdmin") { // 如果操作添加的用户是超级管理员
	// 			return false
	// 		} else {
	// 			// 如果操作添加的用户 不是 超级管理员，则无法添加 当前所在区域之外 的用户
	// 			return department !== item.value
	// 		}
	// 	}
	// }

	// const checkRoleDisable = (item) => {
	// 	if (props.isUpdate) {
	// 		if (roleObj[roleId] === "superAdmin") {
	// 			return false
	// 		} else {
	// 			return true
	// 		}
	// 	} else {
	// 		if (roleObj[roleId] === "superAdmin") {
	// 			return false
	// 		} else {
	// 			// 如果操作添加的用户 不是 超级管理员，则无法添加 比当前角色更大权限以及当前角色权限 的用户
	// 			return roleObj[item.id] !== "editor"
	// 		}
	// 	}
	// }
	// 预留根据部门渲染角色
	// const handleDepartmentChange = (value) => {
	// 	// console.log(value);
	// }

	return (
		<Form
			ref={ref}
			form={form}
			layout="vertical"
			name="form_in_modal"
			initialValues={{
				modifier: 'public',
			}}

		>
			<Form.Item
				name="username"
				label="用户名"
				rules={[{
					required: true,
					message: '请输入用户名'
				}]}
			><Input /></Form.Item>
			<Form.Item
				name="password"
				label="密码"
				rules={[{
					required: true,
					message: '请输入密码'
				}
				]}
			><Input.Password /></Form.Item>
			<Form.Item label="性别" name="gender"
				rules={isDisabled ? [] : [{
					required: true,
					message: '请选择性别'
				}]}
			>
				<Select placement='topLeft' disabled={isDisabled}>
					{
						[{ id: 1, value: '男' }, { id: 2, value: '女' }].map(item => {
							return <Select.Option
								key={item.id} value={item.value}>
								{item.value}</Select.Option>
						})
					}
				</Select>
			</Form.Item>
			<Form.Item
				name="phoneNumber"
				label="手机号"
				rules={[{
					required: false,
					message: '请输入手机号',
					len: 11
				}
				]}
			><Input /></Form.Item>
			<Form.Item label="部门" name="department"
				rules={isDisabled ? [] : [{
					required: true,
					message: '请选择部门'
				}]}
			>
				<Select
					placement='topLeft'
				// onChange={(value) => handleDepartmentChange(value)}
				>
					{
						departments.map(item => {
							return <Select.Option
								key={item.id} value={item.departmentName}>
								{item.departmentName}</Select.Option>
						})
					}
				</Select>
			</Form.Item>

			<Form.Item label="角色" name="roleId"
				rules={[{
					required: true,
					message: '请选择角色'
				}]}
			>
				<Select>
					{/* {
						roleUnderDepartment.length > 0
							? roleUnderDepartment.map(item => {
								return <Select.Option
									key={item.id} value={item.id}>
									{item.roleName}</Select.Option>
							})
							: roles.map(item => {
								return <Select.Option
									key={item.id} value={item.id}>
									{item.roleName}</Select.Option>
							})
					} */
						roles.map(item => {
							return <Select.Option
								key={item.id} value={item.id}>
								{item.roleName}</Select.Option>
						})
					}
				</Select>
			</Form.Item>
		</Form>
	)
})

export default UserForm